<template>
  <transition name="message">
    <div v-if="visible" :class="['message', `message-${type}`]">
      {{ message }}
    </div>
  </transition>
</template>

<script>
export default {
  name: 'Message',
  data() {
    return {
      visible: false,
      message: '',
      type: 'success', // success, error, warning
      duration: 3000
    }
  },
  methods: {
    show(options) {
      this.message = options.message || ''
      this.type = options.type || 'success'
      this.duration = options.duration || 3000
      this.visible = true
      
      setTimeout(() => {
        this.visible = false
      }, this.duration)
    }
  }
}
</script>

<style scoped>
.message {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  min-width: 300px;
  max-width: 500px;
}

.message-enter-active,
.message-leave-active {
  transition: all 0.3s ease;
}

.message-enter-from,
.message-leave-to {
  opacity: 0;
  transform: translateX(-50%) translateY(-20px);
}
</style>

